<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素滚动</title>
	</head>
	<body style="height: 2000px">
		<div style="border: 1px solid black;width: 100px;height: 150px;overflow: auto;">
			哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或
			哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或
			哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或
			哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或
			哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或
			哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或
			哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或
		</div>
		<br/>
		<br/>
		<br/>
		<button id="btn1">得到scrollTop</button>
		<button id="btn2">设置scrollTop</button>
		
		<!-- 1.scrollTop()
		  读取/设备滚动条的Y坐标
		2.$(doucument.body).scrollTop()+$(doucument.doucumentElement).scrollTop()
		  读取页面滚动条的Y坐标(兼容chrome和IE)
		3.$('body,html').scrollTop(60)
		  滚动到指定位置(兼容chrome和IE) -->
		<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			// 需求:
			// 1.得到div或页面滚动条的坐标
			// 2.让div或页面的滚动条滚动到指定位置
			
			// 1.得到div或页面滚动条的坐标
			$('#btn1').click(function(){
				console.log($('div').scrollTop())
				console.log($('html').scrollTop()+$('body').scrollTop())
				console.log($(document.documentElement).scrollTop()+$(document.body).scrollTop())//兼容IE和Chrome
			})
			
			// 2.让div或页面的滚动条滚动到指定位置
			$('#btn2').click(function(){
				$('div').scrollTop(200)
				$('html,body').scrollTop(300)
			})
		</script>
	</body>
</html>
